<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col">
      <text class="fun-self-start text_2">Hello,Stephen</text>
      <view class="fun-flex-col fun-self-stretch group_2">
        <view class="fun-flex-col fun-justify-start fun-items-start fun-relative group_3">
          <view class="group_4"></view>
          <text class="font text_3 pos">My Aseets</text>
        </view>
        <view class="fun-flex-col fun-relative section">
          <view class="fun-flex-col fun-self-stretch group_5">
            <view class="fun-flex-row fun-self-stretch group_6">
              <text class="font_2">$</text>
              <text class="fun-ml-4 font_2 text_4">24,158.99</text>
            </view>
            <text class="fun-self-start font_3 text_5 mt-13">Total static</text>
          </view>
          <view class="fun-flex-col fun-justify-start fun-items-center fun-self-start text-wrapper">
            <text class="font_3 text_6">More</text>
          </view>
          <view class="fun-flex-col fun-justify-start section_2 pos_2">
            <view class="fun-flex-col fun-justify-start fun-items-end image-wrapper">
              <image class="image_4 image_5" src="../../static/12f3cf2848ff8d556b68248bc6433589.png" />
            </view>
          </view>
        </view>
        <view class="fun-flex-row equal-division">
          <view class="fun-flex-col fun-items-center group_7 group_3" @click="toDetail('account')">
            <image class="image_6" src="../../static/b76563d90dcbc32fdc305210afc6f953.png" />
            <text class="fun-mt-8 font_4">My Account</text>
          </view>
          <view class="fun-flex-col equal-division-item ml-29" @click="toDetail('maintenance')">
            <image class="fun-self-start image_6" src="../../static/b3bc313c2a8a9b0efa71b7dbff1c8766.png" />
            <view class="fun-flex-col fun-items-center fun-self-stretch mt-7">
              <text class="font_5">Account Info</text>
              <text class="font_5">Maintenance</text>
            </view>
          </view>
          <view class="fun-flex-col fun-items-center group_7 group_3 ml-29" @click="toDetail('transaction')">
            <image class="image_6" src="../../static/ee6038719032301b2cfae8a1a61a99db.png" />
            <text class="fun-mt-8 font_6 text_7">Transaction Records</text>
          </view>
          <view class="fun-flex-col fun-items-center group_7 group_3 ml-29" @click="toDetail('myWallet')">
            <image class="image_7" src="../../static/596db19432bc317b7b8d9d994c094c54.png" />
            <text class="fun-mt-8 font_4">My Wallet</text>
          </view>
        </view>
      </view>
      <view class="fun-flex-col fun-self-stretch group_8">
        <text class="fun-self-start font text_8">More settings</text>
        <view class="fun-flex-row equal-division_2 mt-21">
          <view class="fun-flex-col fun-items-center group_9 equal-division-item_2" @click="toDetail('privacy')">
            <image class="image_6" src="../../static/6cbba257722aa99f558ab66b1c126949.png" />
            <text class="font_7 text_9 mt-9">Privacy Settings</text>
          </view>
          <view class="fun-flex-col fun-items-center group_9 equal-division-item_2" @click="toDetail('security')">
            <image class="image_6" src="../../static/6521ed40dbcebe60dc83e9e2d36aea1f.png" />
            <text class="font_7 text_10 mt-9">Security Settings</text>
          </view>
          <view class="fun-flex-col fun-items-center group_9 equal-division-item_2" @click="toDetail('contact')">
            <image class="image_7" src="../../static/3c5eba210a40665cd5d456de6d00e49c.png" />
            <text class="font_7 text_11 mt-9">Contact us</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {};
    },

    methods: {
		toDetail(value){
			if(value == "maintenance"){
				uni.navigateTo({
					url:`/pages/mine/maintenance/unbound`,
					nimationType: 'pop-in',
					animationDuration: 200
					
				})
			}
			else if(value == "account"){
				uni.switchTab({
					url:`/pages/myPositions/index`
				})
			}
			else{
				uni.navigateTo({
					url:`/pages/mine/${value}/index`,
					nimationType: 'pop-in',
					animationDuration: 200
					
				})
			}
		}
	},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .mt-13 {
    margin-top: 26rpx;
  }
  .ml-29 {
    margin-left: 58rpx;
  }
  .mt-7 {
    margin-top: 14rpx;
  }
  .mt-21 {
    margin-top: 42rpx;
  }
  .mt-187 {
    margin-top: 374rpx;
  }
  .mt-9 {
    margin-top: 18rpx;
  }
  .page {
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 68rpx;
      padding-right: 28rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .text_2 {
      margin-left: 36rpx;
      margin-top: 50rpx;
      color: #ffffff;
      font-size: 32rpx;
      font-family: SF Pro Display;
      font-weight: 300;
      line-height: 28.28rpx;
    }
    .group_2 {
      margin-top: 64rpx;
      padding: 0 32rpx;
      .group_3 {
        padding: 24rpx 0;
        .group_4 {
          margin-left: 14rpx;
          filter: blur(3.5rpx);
          width: 214rpx;
          height: 8rpx;
        }
        .text_3 {
          line-height: 31.72rpx;
        }
        .pos {
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .section {
        padding: 0 28rpx 30rpx;
        background-image: linear-gradient(106.5deg, #f5798f 0.5%, #a544fa 50.1%, #80c1e6 99.6%);
        border-radius: 24rpx;
        border-left: solid 2rpx #ffffff33;
        border-right: solid 2rpx #ffffff33;
        border-top: solid 2rpx #ffffff33;
        border-bottom: solid 2rpx #ffffff33;
        .group_5 {
          padding: 36rpx 0 60rpx;
          .group_6 {
            padding: 0 4rpx;
            .font_2 {
              font-size: 40rpx;
              font-family: SF Pro Display;
              line-height: 33.78rpx;
              font-weight: 700;
              color: #ffffff;
            }
            .text_4 {
              line-height: 34.98rpx;
            }
          }
          .text_5 {
            font-weight: 300;
            line-height: 17.1rpx;
          }
        }
        .text-wrapper {
          padding: 12rpx 0;
          background-color: #ffffff80;
          border-radius: 32rpx;
          width: 180rpx;
          border-left: solid 2rpx #ffffff;
          border-right: solid 2rpx #ffffff;
          border-top: solid 2rpx #ffffff;
          border-bottom: solid 2rpx #ffffff;
          .text_6 {
            line-height: 17.14rpx;
          }
        }
        .font_3 {
          font-size: 24rpx;
          font-family: SF Pro Display;
          line-height: 17.76rpx;
          color: #ffffff;
        }
        .section_2 {
          background-image: url('../../static/85556446310b26f525db9323d1860c97.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 290rpx;
          height: 124rpx;
          .image-wrapper {
            padding: 30rpx 0 48rpx;
            filter: drop-shadow(0rpx 2rpx 8.7rpx #0000003b);
            background-image: url('../../static/a270778852c6ec33907463ef46c03637.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 290rpx;
            .image_5 {
              margin-right: 24rpx;
            }
          }
        }
        .pos_2 {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .equal-division {
        margin: 36rpx 12rpx 0;
		justify-content: space-between;
        .group_7 {
          margin: 8rpx 0;
          .text_7 {
            line-height: 14.26rpx;
          }
        }
        .equal-division-item {
          padding: 24rpx 0 4rpx;
          background-color: #00033b;
          height: 186rpx;
          .font_5 {
            font-size: 20rpx;
            font-family: SF Pro Display;
            line-height: 24rpx;
            font-weight: 300;
            color: #ffffff;
          }
        }
      }
    }
    .group_8 {
      margin-top: 76rpx;
      .text_8 {
        margin-left: 32rpx;
        line-height: 32.48rpx;
      }
      .equal-division_2 {
        align-self: stretch;
        .group_9 {
          flex: 1 1 250rpx;
          .font_7 {
            font-size: 28rpx;
            font-family: SF Pro Display;
            line-height: 24rpx;
            font-weight: 300;
            color: #ffffff;
          }
          .text_9 {
            line-height: 25.3rpx;
          }
          .text_10 {
            line-height: 25.3rpx;
          }
          .text_11 {
            line-height: 20.36rpx;
          }
        }
        .equal-division-item_2 {
          padding: 8rpx 0;
        }
      }
    }
    .font {
      font-size: 36rpx;
      font-family: Impact;
      color: #ffffff;
    }
    .image_6 {
      width: 88rpx;
      height: 88rpx;
    }
    .image_7 {
      border-radius: 50%;
      width: 96rpx;
      height: 96rpx;
    }
    .section_3 {
      background-color: #1b1d53;
      height: 85.44rpx;
      border-top: solid 2rpx #00000012;
      .group_10 {
        flex: 1 1 187.5rpx;
        .text_12 {
          opacity: 0.5;
        }
        .text_13 {
          font-size: 18rpx;
          line-height: 12.84rpx;
        }
        .text_14 {
          font-size: 18rpx;
        }
        .text_15 {
          font-size: 18rpx;
          line-height: 15.98rpx;
        }
        .text_16 {
          font-size: 18rpx;
          line-height: 16.12rpx;
          font-weight: unset;
        }
      }
      .equal-division-item_3 {
        padding: 8rpx 0 16rpx;
      }
    }
    .image_4 {
      width: 48rpx;
      height: 48rpx;
    }
    .font_6 {
      font-size: 20rpx;
      font-family: SF Pro Display;
      line-height: 13.08rpx;
      font-weight: 300;
      color: #ffffff;
    }
    .font_4 {
      font-size: 20rpx;
      font-family: SF Pro Display;
      line-height: 17.76rpx;
      font-weight: 300;
      color: #ffffff;
    }
  }
</style>